<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>配送员</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <style>
        #user {
            background-color: white;
            right: 100px;

        }
    </style>
</head>
<body>
<div class="layui-container" style="top: 10px">
    <div class="layui-col-md3" style="top: 12px;">
        <div style="margin-left: 20px">
            <button class="layui-btn layui-bg-blue" onclick="myDeliverier()">我的配送</button>
            <button class="layui-btn layui-bg-orange" onclick="reloadPage()">所在地订单</button>
        </div>
    </div>
    <div>
        <ul class="layui-nav layui-layout-right" id="user">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;" style="color: #1f1f1f;">
                    <img src="static/upload/${loginInfo.avatar}" class="layui-nav-img">
                    ${loginInfo.nickname}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="openInfo(${loginInfo.userinfoId})">修改信息</a></dd>
                    <dd><a href="javascript:;" onclick="openPwd()">修改密码</a></dd>
                    <dd><a href="javascript:;" onclick="logout()">退出系统</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-col-md12">
        <div style="height: 530px;overflow-y: scroll;margin-top: 10px">
            <table id="dataTable"></table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="optTemplet">
    <%--<c:if test="${role == 1}">--%>
    <button type="button" lay-event="edit" class="layui-btn layui-btn-sm layui-bg-blue">修改</button>
    <%--</c:if>--%>
    <%--<c:if test="${loginInfo.userinfoId == 1}">--%>
    {{# if(d.userinfoId !== 1){ }}
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-bg-orange">删除</button>
    {{# } }}
    <%--</c:if>--%>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm">待取货</button>
    {{# } else if(d.status === 2){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm">待入库</button>
    {{# } else if(d.status === 3){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm">运输中</button>
    {{# } else if(d.status === 4){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm">配送中</button>
    {{# } else if(d.status === 5){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm">已送达</button>
    {{# } }}
</script>
<script type="text/html" id="avatarTemplet">
    <div style="height: 110px;width: 110px;display: flex;align-items: center;justify-content: center">
        <img title="点击查看详情" onclick="showImage(this)" src="static/upload/{{d.avatar}}" alt="{{d.avatar}}"
             style="display: block;height: 100px;width: 100px;border-radius: 50%;cursor: pointer;">
    </div>
</script>
<script type="text/html" id="senderAddressTemplet">
    {{d.sender_province}} {{d.sender_city}} {{d.sender_district}} {{d.sender_address}}
</script>
<script type="text/html" id="receiverAddressTemplet">
    {{d.receiver_province}} {{d.receiver_city}} {{d.receiver_district}} {{d.receiver_address}}
</script>

<script>
    var table;
    var form;
    var util;
    layui.use(function () {
        util = layui.util;
        /*加载表格模块*/
        table = layui.table;
        /*加载表单模块*/
        form = layui.form;
        /*渲染表格数据*/
        table.render({
            elem: "#dataTable",
            where: {senderDistrict: '${sessionScope.deliverier.district}', status: 1},
            url: "admin/order/page",
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: "orderId", title: "编号", width: 20},
                {field: 'type', title: '订单类型', width: 140},
                {field: 'senderName', title: '发件人', width: 106},
                {field: 'fullSenderAddress', title: '发件地址', width: 260},
                {field: 'receiverName', title: '收件人', width: 106},
                {field: 'fullReceiverAddress', title: '收件地址', width: 260},
                {field: 'receiverPhone', width: 140, title: '收件电话'},
                {field: 'status', title: '状态', width: 90, templet: "#statusTemplet"},
                /*{title: '操作', width: 140, templet: '#optTemplet'}*/
            ]]
        });
        /*监听表格工具栏按钮*/
        table.on("tool(dataTable)", function (obj) {
            const orderId = obj.data.orderId;
            const deliverierId = ${loginInfo.userinfoId};
            const event = obj.event;
            switch (event) {
                case "delete":
                    layer.confirm('确定删除编号[' + orderId + ']的数据吗?', {
                        icon: 3,
                        title: '询问'
                    }, function (index) {
                        $.ajax({
                            url: "admin/order/delete/" + orderId,
                            method: "delete",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("删除成功", {icon: 1})
                                    table.reloadData('dataTable')
                                } else {
                                    layer.alert(res.msg, {icon: 2})
                                }
                            },
                            error(e) {
                                layer.alert('服务器睡着了')
                                console.log(e)
                            }
                        })
                        layer.close(index);
                    })
                    break;
                case "edit":
                    layer.open({
                        type: 2,
                        content: "admin/order/edit?orderId=" + orderId,
                        area: ["600px", "600px"]
                    })
                    break;
                case "status":
                    layer.open({
                        type: 2,
                        content: "admin/order/status?orderId=" + orderId + "&deliverierId=" + deliverierId,
                        area: ["500px", "100px"]
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        });
        /*监听表格头部按钮*/
        table.on("toolbar(dataTable)", function (obj) {
            const event = obj.event;
            console.log(obj)
            switch (event) {
                case "LAYTABLE_PRINT":
                case "LAYTABLE_COLS":
                    break;
                case "add":
                    layer.open({
                        type: 2,
                        content: "admin/order/edit",
                        area: ["600px", "600px"]
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        })
        /*监听表单提交(查询按钮)*/
        form.on("submit(search)", function (data) {
            table.reload('dataTable', {
                where: {
                    ...data.field,
                    page: 1
                }
            });
            return false;
        });
    });

    function logout() {
        layer.confirm('确定退出系统吗？', {icon: 3, title: "询问"}, function (index) {
            location.replace("vip/logout")
            layer.close(index)
        })
    }

    function openInfo(userinfoId) {
        layer.open({
            type: 2,
            content: "admin/userinfo/edit?userinfoId=" + userinfoId,
            area: ["600px", "500px"]
        })
    }

    function showImage(_this) {
        const fileName = $(_this).prop('alt')
        layer.photos({
            photos: {
                data: [{
                    alt: fileName,
                    src: 'static/upload/' + fileName
                }]
            }
        })
    }

    function openPwd() {
        layer.open({
            type: 2,
            content: "vip/password",
            area: ["400px", "400px"]
        })
    }

    function myDeliverier() {
        const deliverierId = ${loginInfo.userinfoId};
        table.render({
            elem: "#dataTable",
            where: {deliverierId: deliverierId},
            url: "admin/order/my-deliverier",
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: "orderId", title: "编号", width: 20},
                {field: 'type', title: '订单类型', width: 140},
                {field: 'senderName', title: '发件人', width: 106},
                {field: 'fullSenderAddress', title: '发件地址', width: 260},
                {field: 'receiverName', title: '收件人', width: 106},
                {field: 'fullReceiverAddress', title: '收件地址', width: 260},
                {field: 'receiverPhone', width: 140, title: '收件电话'},
                {field: 'status', title: '状态', width: 90, templet: "#statusTemplet"},
                /*{title: '操作', width: 140, templet: '#optTemplet'}*/
            ]]
        });
    }

    function reloadPage() {
        table.render({
            elem: "#dataTable",
            where: {senderDistrict: '${sessionScope.deliverier.district}', status: 1},
            url: "admin/order/page",
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: "orderId", title: "编号", width: 20},
                {field: 'type', title: '订单类型', width: 140},
                {field: 'senderName', title: '发件人', width: 106},
                {field: 'fullSenderAddress', title: '发件地址', width: 260},
                {field: 'receiverName', title: '收件人', width: 106},
                {field: 'fullReceiverAddress', title: '收件地址', width: 260},
                {field: 'receiverPhone', width: 140, title: '收件电话'},
                {field: 'status', title: '状态', width: 90, templet: "#statusTemplet"},
                /*{title: '操作', width: 140, templet: '#optTemplet'}*/
            ]]
        });
    }
</script>
</html>